<!doctype html>
<html lang="en">
<head>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-responsive.css">
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-responsive.min.css">
	<meta charset="UTF-8">
	<title>Picture Labelling Game</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script src="script.js"></script>
	<script src="script2.js"></script>
	
	<script src="js/button.js"></script>
	

</head>
<body>
	<div id="headingContainer">
		
	</div>
	
	<div class="surroundAll">
		
		<div id="user" ><p style="float:left;">Logged in as </p>
		<div id="username">  </div>
		<p style="color:grey; font-size: 20px;float:left;margin-right:5px;"> | </p> <p style="float:left;">Current ranking: <div id="rank"> 36 </div></p></div>
		
		<a id="exit" href="logout.php">Log out</a></br>
		<div id="surroundingBox">
			<div id="header"><!-- Here goes User name, Score and Logout link -->
				<div id="info">
					<!-- code for username -->
					<!-- code for score -->
					<script src="bootstrap/js/bootstrap.js"></script>
					<script src="bootstrap/js/bootstrap.min.js"></script>
					<button class="btn btn-info btn-small"  
						id="bg" data-placement='bottom' rel="tooltip" title="Background Image">
						Score: <div id="scoreNumber"></div>
					</button>
					
					<div class="bgform popover fade bottom in">
					<div id="scoreBoard">
						<p>1.Nilsike</p>
						<p>2.Arthur</p>
					</div>
					</div>
						<script>
						$("#bg").click(function(){
							$('.bgform').slideToggle();
						});
							
						</script>
						 <h1 id="heading">Picture Labeling Game</h1>
					</br>
				</div>
			</div>
			 
			
			
				
			<div id="tabooContainer">
				<div id="taboo">
					<p>Taboo words</p>	
				</div>
				<div id= "tabooWords" >
				</div>
				<!-- Taboo words container -->
				
			</div>
			
			<div id="pictureContainer">
				<img id="Picture" src"" />
				<!-- Picture container -->

								
			</div>
			
			<div id="answer">
				<input type="text" id="answer_textbox" maxlength="15" placeholder="tag a pic ..." onclick="fadeWarningOut()"></input>
				<input id="add" type="submit" value="Add" onclick="addAnswer()"></input>
				<!-- User answer input -->
			</div>
			
			<div id="yourWordsContainer">
				
				
				<div id="stabilizer">
				</div>
				<div id="wordGroup">
				</div>
				
				<!-- User defined words container -->
				<input id="sendInput" type="submit" value="Send" onclick="sendAnswers()"></input>
				<input id="nextInput" type="submit" value="Skip" onclick="loadPicture()"></input>
			</div>
		</div>
	</div>
</body>
</html>